<template>
  <div class="activity">
    <van-tabs v-model="active" title-active-color="#1989fa" animated color="#1989fa" @change="onChange">
      <van-tab :title="item" v-for="(item,index) in titlelist" :key="index">
        <div v-if="isshow" class="showbox">
          <div class="first" v-for="list in listdata" :key="list.id">
            <div class="one">
              <img :src="list.tx_path" alt="">
            </div>
            <div class="two">
              <p>淘宝会员名：{{list.taobao_name}}</p>
              <p>手机号：{{list.phone}}</p>
              <p>注册时间：{{list.addtime}}</p>
              <p>接单数：{{list.task_num}}</p>
            </div>
            <div class="three" v-if="active == 1">
              <p style="border:1px solid #04a7f5;color:#04a7f5;" @click="RemindTasking(list)">提醒活动</p>
<!--              <p style="border:1px solid #04a7f5;color:#04a7f5;" @click="pullback(list)">拉黑个人</p>-->
              <!-- <p style="border:1px solid #04a7f5;color:#04a7f5;">拉黑该组</p> -->
<!--              <p style="background:#04a7f5;color:#fff;" @click="onStop(list)" v-if="list.apprentice_status == 1">暂停收徒</p>-->
<!--              <p style="background:#bbb;color:#fff;" v-else>已经暂停</p>-->
<!--              <p style="background:#f5a300;color:#fff;" @click="upgrade(list)" v-if="list.role == 1">升级师傅</p>-->
<!--              <p style="background:#bbb;color:#fff;" v-else>已是师傅</p>-->
            </div>
            <div class="three" v-if="active == 3">
              <p style="background:#04a7f5;color:#fff;">提醒接单</p>
            </div>
            <div class="three" v-if="active == 3" @click="audit_apprentices()">
              <p style="background:#04a7f5;color:#fff;">审核徒弟</p>
            </div>
          </div>
          <van-pagination v-model="page" :page-count="total" mode="simple" @change="pageChange"/>
        </div>
        <div class="nodata" v-else>
          <img src="../assets/img/nodata.png" alt="">
          <span class="textcontent">暂无徒弟信息哦~</span>
        </div>
      </van-tab>
    </van-tabs>
<!--    <Footer permsg='1'></Footer>-->
  </div>
</template>

<script>
import { apprenticelist,laheApprentice,upgradeapprentice,timeoutapprentice,RemindTask } from '../api/api';
// import Footer from '../components/footer.vue'
import aestool from '../utils/aestool.js';
export default {
  // components:{ Footer },
  data(){
    return{
      total:0,
      active:0,
      listdata:[],
      page:1,
      titlelist:['待审核','已激活','黑名单','可接单'],
      isshow:false,
      loading: false,
      finished: false
    }
  },
  created(){
    this.getlistData()
  },
  methods:{
    //审核徒弟
    audit_apprentices(){

    },
    //提醒活动
    RemindTasking(list){
      let params = {
        userid:aestool.encrypt(list.id,'Remindtaskcpfasd'),
      }
      RemindTask(params).then((res)=>{
        this.$toast(res.Message)
      })
    },
    //获取列表数据
    getlistData(){
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let actidx
      if(this.active == 0){
        actidx = 4
      }else if(this.active == 1){
        actidx = 2
      }else if(this.active == 2){
        actidx = 3
      }else if(this.active == 3){
        actidx = 2
      }
      let params = {
        parameter:aestool.encrypt(actidx,'Apprenticeliste0'),
        page:this.page,
        page_size:10
      }
      this.listdata = []
      apprenticelist(params).then(res=>{
        toastload.clear()
        if(res.Status == 200){
          this.isshow = true
          this.total = Math.ceil(res.Count/10)
          let temp = JSON.parse(aestool.decrypt(res.Data,'Apprenticeliste0'))
          let ipos
          temp.forEach(item => {
            ipos = item.addtime.indexOf("T")
            item.addtime = item.addtime.substring(0,ipos)
            this.listdata.push(item)
          });
          console.log('列表数据',this.listdata)
        }else{
          this.isshow = false
        }
      })
    },
    //拉黑
    pullback(item){
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        parameter:aestool.encrypt(item.id,'LaheApprentice12')
      }
      laheApprentice(params).then(res=>{
        toastload.clear()
        console.log('拉黑',res)
        if(res.Status == 200){
          this.$toast('拉黑成功！')
          setTimeout(() => {
            this.getlistData()
          }, 1500);
        }else{
          this.$toast(res.Message)
        }
      })
    },
    //暂停收徒
    onStop(item){
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        parameter:aestool.encrypt(item.id,'LaheApprentice12')
      }
      timeoutapprentice(params).then(res=>{
        toastload.clear()
        console.log('暂停',res)
        if(res.Status == 200 ){
          this.$toast(res.Message)
          setTimeout(() => {
            this.getlistData()
          }, 1500);
        }else{
          this.$toast(res.Message)
        }
      })
    },
    //升级师傅
    upgrade(item){
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        parameter:aestool.encrypt(item.id,'Upgrade123654789')
      }
      upgradeapprentice(params).then(res=>{
        toastload.clear()
        if(res.Status == 200 ){
          this.$toast(res.Message)
          setTimeout(() => {
            this.getlistData()
          }, 1500);
        }else{
          this.$toast(res.Message)
        }
      })
    },
    getNum(index) {
      this.num = index
    },
    onChange(){
      this.page = 1
      this.listdata = []
      this.getlistData()
    },
    pageChange(val){
      this.page = val
      this.getlistData()
    }
  }
}
</script>
<style lang="stylus" scoped>
.activity{
  height 100%
  font-size 12px
  background #f8f8f8
  .showbox{
    padding-bottom 56px
    background #f8f8f8
  }
  .nodata{
    padding-top:80px
    display flex
    flex-direction column
    justify-content center
    align-items center
    img{
      width 70%
    }
    .textcontent{
      font-size 14px
      color #969799
    }
  }
  .first{
    padding 10px
    background #fff
    margin 10px
    display flex
    justify-content space-around
    align-items center
    .one{
      width 26%
      img{
        width 80px
        height 80px
        border-radius 50%
      }
    }
    .two{
      width 52%
      p{
        line-height 22px
        color #9d9b9c
      }
    }
    .three{
      width 22%
      p{
        text-align center
        margin 8px 0
        padding 3px 10px
        border-radius 2px
      }
    }
  }
}
</style>
